<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>班级管理 - 学生管理系统</title>
    <link rel="stylesheet" href="../css/public.css" />
    <script>
      function setActive() {
        var buttons = document.getElementsByTagName("button");
        for (var i = 0; i < buttons.length; i++) {
          buttons[i].addEventListener("click", function () {
            for (var j = 0; j < buttons.length; j++) {
              buttons[j].classList.remove("active");
            }
            this.classList.add("active");
          });
        }
      }
    </script>
  </head>

  <body onload="setActive()">
    <header>
      <h1>学生管理系统</h1>
      <nav>
        <a href="../index.html"><button>首页</button></a>
        <a href="student.html"><button>学生管理</button></a>
        <button class="active">班级管理</button>
      </nav>
    </header>
    <main>
      <h2>班级信息表</h2>
      <div class="search_box">
        <input
          type="text"
          id="searchInput"
          placeholder="请输入班级关键字进行搜索..."
          onkeyup="get_by_keyword(this.value)"
        />
      </div>
      <table id="studentTable" class="table_main">
        <thead>
          <tr>
            <th>班级id</th>
            <th>班级名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="data_info"></tbody>
      </table>
      <div class="div_in_container">
        <div class="div_input_son_container">
          <h3>添加班级</h3>
          <div id="add_clas">
            <input
              type="text"
              name=""
              id="add_clas_input"
              placeholder="请输入班级名"
            />
          </div>
          <button onclick="handle_add()">添加班级</button>
        </div>
        <div class="div_input_son_container">
          <h3>编辑班级</h3>
          <div id="edit_clas">
			<input type="text" id="edit_clas_input" placeholder="请输入新的班级名称">
            <input type="hidden" id="edit_clas_id">
		  </div>
          <button onclick="handle_update()">保存</button>
        </div>
      </div>
    </main>
  </body>
  <script src="../js/request.js"></script>
  <script>
    // 搜索
    function get_by_keyword(keyword) {
      getData(
        "http://127.0.0.1:8888/api/clas/?keyword=" + keyword,
        function (error, data) {
          if (error) {
            console.error("请求出错：", error);
          } else {
            var tbody = document.getElementById("data_info");
            tbody.innerHTML = "";
            data["data"].forEach(function (value, index, array) {
              // {
              // 	"id": 2,
              // 	"name": "云计算2301"
              // }
              var tr = document.createElement("tr");
              var classid = document.createElement("td");
              classid.innerText = value["id"];
              var classname = document.createElement("td");
              classname.innerText = value["name"];

              var operate = document.createElement("td");
              var edit = document.createElement("span");
              edit.innerText = "编辑";
              edit.addEventListener("click", function(){
              document.getElementById("edit_clas_id").value = value["id"];
              document.getElementById("edit_clas_input").value = value["name"];
			  })
              operate.appendChild(edit);

              var del = document.createElement("span");
              del.innerText = "删除";
              del.addEventListener("click", function () {
                handle_delete(value["id"]);
              });

              operate.appendChild(del);

              // 挂载
              tr.appendChild(classid);
              tr.appendChild(classname);
              tr.appendChild(operate);
              tbody.appendChild(tr);
            });
          }
        }
      );
    }
    get_by_keyword("");

    // 增加
    function handle_add() {
      var inp = document.getElementById("add_clas_input");
      if (inp.value == "") {
        alert("请输入班级名称");
      } else {
        var className = encodeURIComponent(inp.value);
        postData(
          `http://127.0.0.1:8888/api/clas/${className}`,
          {},
          function (err, data) {
            if (err) {
              console.error(err);
            } else {
              alert("新增成功");
              location.reload();
            }
          }
        );
      }
    }

    // 删除
    function handle_delete(id) {
      if (confirm("你确定要删除id为" + id + "的班级吗？")) {
        deleteData(
          "http://127.0.0.1:8888/api/clas/" + id,
          function (err, data) {
            if (err) {
              console.error(err);
            } else {
              alert("删除成功");
              location.reload();
            }
          }
        );
      } else {
        console.log("用户选择了取消");
      }
    }

    // 更新
    function handle_update() {
      var id = document.getElementById("edit_clas_id").value;
      var inp = document.getElementById("edit_clas_input");
      var new_name = inp.value.trim();

      if (id == "") {
        alert("请先选择要编辑的班级");
        return;
      }
      if (new_name == "") {
        alert("请输入新的班级名称");
      } else {
        putData(
          "http://127.0.0.1:8888/api/clas/" + id,
          { name: new_name },
          function (err, data) {
            if (err) {
              alert(err);
              inp.value = "";
            } else {
              alert("更新成功");
              location.reload();
            }
          }
        );
      }
    }
  </script>
</html>
